<template>

  <body id="poster">
    <div class="container">

      <el-form class="login-container" label-position="left" lable-width="0px">
      <h3 style="padding-right:10px;" class="login-title">
        Flora植物养成社区
        <el-button type="text" class="register-btn" style="padding-right: 10px" @click="onRegister">没有账号，点我注册</el-button>
      </h3>
    <el-form-item label="">
      <el-input type="text" autocomplete="off"v-model="loginForm.username" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item label="">
      <el-input type="password" autocomplete="off" v-model="loginForm.password" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" style="width: 100%;background-color: #505458;border: none" @click="onSubmit">登录</el-button>
    </el-form-item>
  </el-form></div>
  </body>
</template>

<script>

import {userLogin} from "@/api/user";
import {removeToken, setToken} from "@/utils/auth";

export default {
  name: "Login",
  data() {
    return {
     loginForm:{
       username:'',
       password:''
     }
    }
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route':'routeChange'
  },
  created() { //生命周期函数
    var that = this;
    this.routeChange();
  },
  methods: {
    routeChange:function(){
      console.log("11111!!!")
      var that = this;
      that.login = that.$route.query.login==undefined?1:parseInt(that.$route.query.login);//获取传参的login
      that.urlstate = that.$route.query.urlstate==undefined?0:that.$route.query.urlstate;//获取传参的usrlstate状态码
      // console.log(that.login,that.urlstate);

    },
    onSubmit() {
      // removeToken()
      // localStorage.removeItem('userInfo');
      // console.log(this.loginForm.username)
      // console.log(this.loginForm.password)
      // console.log(localStorage.getItem('userInfo'))
      userLogin(this.loginForm.username,this.loginForm.password).then((response)=>{
        // 登录成功记录token和用户信息，登录失败给对应提示
        console.log(response)
        setToken(response.token)
        // 存储用户信息
        localStorage.setItem("userInfo",JSON.stringify(response.userInfo))
        if(localStorage.getItem('logUrl')){
          this.$router.push({path:'/MainPage'})
        }else{
          this.$router.push({path:'/MainPage'})
        }
      })
    },
    onRegister(){
      console.log('register');
      this.$router.push({path:'/Register'})
    }
  }

}
</script>

<style>
#poster{
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  /*background-image:url("../../assets/img/bgImg/plant4.png");*/
  background-color: #a0cba0;
}
body{
  margin: 0px;
  padding: 0px;
}
.login-container{
  /*border-radius: 15px;*/
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  background-clip: padding-box;
  /*margin: 40px auto;*/
  height: 405px;
  /*margin-bottom: 0px;*/
  /*height: 100%;*/
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 310px;
  width: 330px;
  background: #fff;
  border: 1px solid #eaeaea;
  /*box-shadow:0 0 25px #cac6c6;*/
  padding: 30px 30px 15px 30px;
}
.login-title{
  margin: 0 auto 40px auto;
  color: #505458;
  text-align: left;

}
.container{
  border-radius: 15px;
  background-clip: padding-box;
  margin: 100px auto;
  width: 700px;
  height: 450px;
  background: #fff;
  border: 1px ;
  box-shadow:0 0 25px #cac6c6;
  background-image: url("../../assets/img/bgImg/plant5.png");
  /*padding: 35px 35px 15px 35px;*/
}



</style>